<!--
 * @Author: your name
 * @Date: 2021-10-19 15:31:25
 * @LastEditTime: 2021-10-21 11:49:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\class.vue
-->
<template>
  <div class="bg">
    <van-nav-bar title="课程" left-text="返回" @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="18" @click="onClickfdj" />
      </template>
    </van-nav-bar>
    <van-tabs :active="active">
      <van-tab title="榜单">
        <div class="notfound">
          <div class="picture">
            <img src="../../src/assets/img/NotFound.png" alt="" />
          </div>
          <div class="text">
            <p>此课程还未上架，敬请期待</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="心理学">
        <div class="psychology">
          <div class="ps-content" v-for="item in classHotList" :key="item.id">
            <div class="message">
              <div class="title">
                <span>{{ item.title }}</span>
                <p>{{ item.motto }}</p>
              </div>
              <div class="bot">
                <p class="position">{{ item.position }}</p>
                <span>{{ item.pages }}讲/</span>
                <span v-if="item.price == 0">免费</span>
                <span v-else>{{ item.price }}元</span>
              </div>
            </div>
            <div class="pit">
              <img :src="item.imgUrl" alt="" />
            </div>
            <div class="right">
              <div class="top">
                <span>{{ item.num }}人订阅</span>
              </div>
              <div class="bot">
                <span v-if="item.price == 0">开始学习</span>
                <span v-else>立即购买</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="传统文化">
        <div class="notfound">
          <div class="picture">
            <img src="../../src/assets/img/NotFound.png" alt="" />
          </div>
          <div class="text">
            <p>此课程还未上架，敬请期待</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="职场">
        <div class="notfound">
          <div class="picture">
            <img src="../../src/assets/img/NotFound.png" alt="" />
          </div>
          <div class="text">
            <p>此课程还未上架，敬请期待</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="自媒体">
        <div class="notfound">
          <div class="picture">
            <img src="../../src/assets/img/NotFound.png" alt="" />
          </div>
          <div class="text">
            <p>此课程还未上架，敬请期待</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="全部分类">
        <div class="notfound">
          <div class="picture">
            <img src="../../src/assets/img/NotFound.png" alt="" />
          </div>
          <div class="text">
            <p>此课程还未上架，敬请期待</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, computed } from "vue";
// 导入toRaw函数
// import { toRaw } from "@vue/reactivity";

import { NavBar, Icon, Tab, Tabs } from "vant";
import { useStore } from "vuex";
export default {
  components: {
    VanNavBar: NavBar,
    VanIcon: Icon,
    VanTabs: Tabs,
    VanTab: Tab,
  },
  setup() {
    // let classHotList = toRaw(store.state.classHot.classHotList);

    const router = useRouter();
    const store = useStore();
    const active = ref(1);
    store.dispatch("getClassHot");

    const classHotList = computed(() => store.state.classHot.classHotList);
    console.log(classHotList);
    const onClickLeft = () => {
      router.go(-1);
    };
    const onClickfdj = () => {
      router.push("/grabble");
    };
    return {
      active,
      onClickLeft,
      classHotList,
      onClickfdj,
    };
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/var.less");
/deep/.van-nav-bar__title {
  font-size: 19px;
}
/deep/.van-nav-bar .van-icon {
  color: #000;
}
/deep/.van-nav-bar__text {
  color: #000;
}
/deep/.van-tab--active {
  color: #4ab8fa;
}
/deep/.van-tabs__line {
  background: #4ab8fa;
}
.psychology {
  padding-top: 10px;
  background-color: #fff;
  .ps-content {
    margin: 0 auto;
    width: 95%;
    padding-top: 10px;
    border-bottom: 1px solid rgb(238, 236, 236);
    display: flex;
    .pit {
      flex: 0.8;
      img {
        width: 110px;
        height: 147px;
      }
    }
    .right {
      flex: 0.5;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        font-size: 10px;
        color: #ccc;
      }
      .bot {
        display: inline-block;
        width: 70px;
        height: 30px;
        font-size: 10px;
        border-radius: 13px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        background-color: #4ab8fa;
      }
    }
    .message {
      flex: 1.1;
      font-size: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        span {
          font-weight: 600;
        }
        p {
          font-size: 10px;
        }
      }
      .bot {
        .position {
          font-size: 5px;
        }
      }
    }
  }
}
.bg {
  background: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
}
.notfound {
  padding-top: 140px;
  text-align: center;
  background: #fff;
  .picture {
    img {
      width: 290px;
      height: 240px;
    }
  }
  .text {
    font-size: 18px;
    color: #909090;
    padding-top: 30px;
  }
}
</style>
